<template>
  <div class="bottom">
    <div class="top">
      <slot name="top"></slot>
    </div>
    <textarea placeholder="请输入评论内容..." v-model.trim="content"></textarea>
    <div class="btn" @click="send">发表</div>
    <div class="pinlun">
      <h1>评论列表</h1>
      <span>{{ namelist.length }}条评论</span>
    </div>
    <div class="name" v-for="value in namelist" :key="value.id">
      <div class="left">
        <span>{{ value.content }}</span>
        <span style="color: skyblue">{{ value.user_name }}</span>
      </div>
      <div class="right left">
        <span></span>
        <span>{{ switchTimeFormat(value.add_time) }}</span>
      </div>
    </div>
    <div class="btn loadmore" @click="init">下一页</div>
  </div>
</template>

<script>
import { getname, postcomment } from "@/apis/news";
export default {
  data() {
    return {
      pageindex: 1,
      namelist: [],
      content: "",
    };
  },
  props: {
    name: {
      type: String,
    },
  },
  mounted() {
    this.dianji();
  },
  methods: {
    init() {
      this.pageindex++;
      // console.log(this.pageindex);
      this.dianji();
    },
    dianji() {
      getname(this.$route.params.id, { pageindex: this.pageindex }).then(
        (res) => {
          // console.log(res);
          // this.pageindex=1
          this.namelist = res.data.message;
          // console.log(this.namelist.length);
          // console.log(this.pageindex);
        }
      );
    },

    send() {
      let data = this.content;
      let date = new Date();
      if (this.content.length == 0) {
        return this.$toast.fail("请输入评论");
      }
      postcomment(this.$route.params.id, data).then((res) => {
        // console.log(res);
        this.$toast.success(res.data.message);
        //   this.namelist.unshift({content:this.content,user_name:this.namelist[0].user_name,
        //   add_time:date})
        this.content = "";
        this.pageindex = 1;
        this.dianji();
      });
    },
    switchTimeFormat(time) {
      const dateTime = new Date(time);
      const year = dateTime.getFullYear();
      const month = dateTime.getMonth() + 1;
      const date = dateTime.getDate();
      const hour = dateTime.getHours();
      const minute = dateTime.getMinutes();
      const second = dateTime.getSeconds();
      return `${year}-${this.addZero(month)}-${this.addZero(
        date
      )} ${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(second)}`;
    },
    addZero(v) {
      return v < 10 ? "0" + v : v;
    },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  //   margin: 4.166667rem 0 4.166667rem 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border-top: 3px solid #ccc;

  textarea {
    margin-top: 10px;
    padding: 1.25rem;
    color: skyblue;
    width: 95%;
    height: 10%;
    padding: 0.416667rem;
    border: 2px solid #ccc;
    outline: none;
    resize: none;
    border-radius: 5px;
    font-size: 1.4rem;
  }
}
.btn {
  margin-top: 0.833333rem;
  width: 96%;
  //   height: 4rem;
  height: 3rem;
  //   background-color: red;
  text-align: center;
  line-height: 3rem;
  border-radius: 5px;
  background-color: #26a2ff;
  color: #ffffff;
  font-size: 1.25rem;
}
.pinlun {
  display: flex;
  justify-content: space-around;
  margin-top: 0.833333rem;
  width: 100%;
  height: 4rem;

  line-height: 4rem;
  border-radius: 5px;

  color: #ccc;
  font-size: 1.25rem;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
  }
}
.name {
  border-bottom: 3px solid #ccc;
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: space-around;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.loadmore {
  border: 2px solid red;
  background-color: #ffffff;
  color: red;
}
</style>